<template>
  <view class="container">
    <!-- 滚动视图容器 -->
    <scroll-view class="scroll-view" scroll-y="true">
      <!-- 1. 轮播图区域 -->
      <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image :src="item" class="swiper-img" mode="aspectFill"></image>
        </swiper-item>
      </swiper>

      <!-- 2. 城市介绍区域 -->
      <view class="section">
        <text class="section-title">泉州介绍</text>
        <text class="section-desc">海上丝绸之路起点·泉州</text>
        <text class="section-content">历史上泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期曾被誉为“东方第一大港”。</text>
        <text class="section-content" style="color:red;">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</text>
        <text class="section-content">特色文化：南音、水密隔舱福船制造等丰富的非物质文化遗产。</text>
      </view>

      <!-- 3. 探索进度区域 -->
      <view class="section">
        <text class="section-title">探索进度</text>
        <progress percent="60" show-info="true" stroke-width="6" active="true"></progress>
      </view>

      <!-- 4. 城市选择区域 -->
      <view class="section">
        <text class="section-title">选择城市</text>
        <picker mode="region" :value="region" @change="onRegionChange">
          <view class="picker-text">当前选择: {{ region[0] }}·{{ region[1] }}·{{ region[2] }}</view>
        </picker>
      </view>

      <!-- 5. 媒体展示与偏好设置区域 -->
      <view class="section">
        <text class="section-title" style="color:red;	">泉州宣传</text>
        <video class="video" :src="videoUrl" controls="true" poster="https://via.placeholder.com/300x200"></video>
        <button class="video-btn" @click="playVideo">播放视频</button>
		
		<button class="video-btn" @click="toggleAudio">
		{{isAudioPlaying ? '暂停音乐' : '播放音乐'}}
		</button>
		
        <text class="video-desc" >泉州乐园</text>

        <text class="section-title">偏好设置</text>
        <text class="radio-title">出行方式</text>
        <radio-group @change="onRadioChange">
          <label class="radio-item" v-for="(item, index) in radioList" :key="index">
            <radio :value="item.value" :checked="item.checked"></radio>
            <text>{{ item.label }}</text>
          </label>
        </radio-group>

        <view class="switch-item">
          <text>显示推荐景点:</text>
          <switch :checked="showRecommend" @change="onSwitchChange"></switch>
        </view>

		<view class="item uni-column">
			<view class="title"></view>
			 <text>探索半径:km</text>
			<slider value="50" name="slider" show-value></slider>
		</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图图片列表
      swiperList: [
		  "/static/city1.png",
		  "/static/city2.png",
		  "/static/city3.png"
	  ],
      // 城市选择默认值
      region: ["福建省", "泉州市", "南安市"],
      // 视频地址
      videoUrl: "/static/city-video.mp4", // 替换为实际视频地址
	  
	  audioUrl: "/static/city-music.mp3", // 替换为实际音乐地址
	         audioContext: null,
	         isAudioPlaying: false,
	  
      // 出行方式单选列表
      radioList: [
        { label: "公交", value: "bus", checked: true },
        { label: "自驾", value: "car", checked: false },
        { label: "步行", value: "walk", checked: false }
      ],
      // 显示推荐景点开关
      showRecommend: true,
      // 探索半径滑块值
      sliderValue: 1
    };
  },
   onLoad() {
       // 创建音频上下文
       this.audioContext = uni.createInnerAudioContext();
       this.audioContext.src = this.audioUrl;
       this.audioContext.obeyMuteSwitch = false; // 不跟随系统静音
     },
     onUnload() {
       // 页面卸载时停止并释放音频
       if (this.audioContext) {
         this.audioContext.stop();
         this.audioContext.destroy();
       }
     },
  methods: {
    // 城市选择变化
    onRegionChange(e) {
      this.region = e.detail.value;
    },
    // 播放视频
    playVideo() {
      const videoContext = uni.createVideoContext("myVideo", this);
      videoContext.play();
    },
	
	// 播放/暂停音乐
	     toggleAudio() {
	       if (this.isAudioPlaying) {
	         this.audioContext.pause();
	       } else {
	         this.audioContext.play();
	       }
	       this.isAudioPlaying = !this.isAudioPlaying;
	     },
	
    // 出行方式变化
    onRadioChange(e) {
      this.radioList.forEach(item => {
        item.checked = item.value === e.detail.value;
      });
    },
    // 显示推荐景点开关变化
    onSwitchChange(e) {
      this.showRecommend = e.detail.value;
    },
    // 探索半径滑块变化
    onSliderChange(e) {
      this.sliderValue = e.detail.value;
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}
.scroll-view {
  width: 100%;
  height: 100%;
}
.swiper {
  width: 100%;
  height: 300rpx;
}
.swiper-img {
  width: 100%;
  height: 100%;
}
.section {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}
.section-desc {
  font-size: 30rpx;
  color: #666;
  display: block;
  margin-bottom: 15rpx;
}
.section-content {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
  line-height: 1.5;
}
.progress {
  margin-top: 20rpx;
}
.picker-text {
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
}
.video {
   width: 100%;
   height: 300rpx;
   margin: 10rpx 0;
 }
 .video-btn {
   margin: 10rpx 0;
   background-color: #007aff;
   color: #fff;
 }
 .video-desc {
   font-size: 26rpx;
   color: #999;
   display: block;
   margin: 10rpx 0;
 }
 .radio-title {
   font-size: 30rpx;
   font-weight: bold;
   display: block;
   margin: 20rpx 0 10rpx;
 }
 .radio-item {
   display: flex;
   align-items: center;
   margin-right: 30rpx;
   font-size: 28rpx;
 }
 .switch-item, .slider-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 20rpx 0;
   font-size: 28rpx;
 }
 </style>
